// Dashboard 通用样式

// 使用 Element Plus 变量
@use "element-variables" as *;

// 额外的 Dashboard 专用变量
$section-spacing: 20px;

// Element Plus 组件增强样式
.el-card {
  border: 1px solid var(--el-border-color-light);
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
  }
}

// Dashboard 专用样式类
.dashboard-container {
  height: 100%;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: $section-spacing;
  overflow-x: hidden;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

// 确保主容器不会导致横向滚动
.main-container {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

// 修复 Element Plus Row 组件的滚动问题
.el-row {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;

  // 限制负边距不会导致溢出
  &[class*="el-row--flex"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  // 处理 gutter 属性产生的负边距
  &.el-row {
    margin-left: 0 !important;
    margin-right: 0 !important;

    .el-col {
      padding-left: 10px;
      padding-right: 10px;
    }
  }
}

.el-col {
  box-sizing: border-box;
}

// 图标容器圆角
.icon-container {
  border-radius: var(--el-border-radius-base);
}

// 统计卡片特殊样式
.stat-card {
  .el-card {
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.8) 100%
    );
    backdrop-filter: blur(10px);
  }
}

// 快捷操作项圆角
.action-item {
  border-radius: var(--el-border-radius-base);
  transition: all 0.3s ease;

  &:hover {
    background-color: rgba(64, 158, 255, 0.05);
    transform: translateY(-2px);
  }

  .action-icon {
    border-radius: var(--el-border-radius-base);
  }
}

// 活动项圆角
.activity-item {
  border-radius: var(--el-border-radius-base);
  padding: 12px;
  margin-bottom: 8px;
  transition: all 0.3s ease;

  &:hover {
    background-color: rgba(64, 158, 255, 0.03);
  }

  .activity-icon {
    border-radius: var(--el-border-radius-circle);
  }
}

// 信息项圆角
.info-item {
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--el-border-radius-base);
  border: 1px solid var(--el-border-color-light);
}

// 服务器信息项
.server-info {
  background: rgba(255, 255, 255, 0.3);
  border-radius: var(--el-border-radius-base);
  padding: 12px 16px;
  margin-bottom: 8px;
  border: 1px solid var(--el-border-color-light);

  &:last-child {
    margin-bottom: 0;
  }
}

// 响应式调整
@media (max-width: 768px) {
  .dashboard-container {
    gap: 16px;
  }
}
